<script setup lang="ts">
import { computed, inject } from "vue";
import { useImageDataStore } from "@renderer/store/pinia/imageData";

const {
  viewId
} = inject('viewerInfo') as any


const imgDataStore = useImageDataStore()

const windowInfo = computed(() => {
  if (imgDataStore.extraInfoObj[viewId] && imgDataStore.extraInfoObj[viewId]['window_width']){
    return {
      windowWidth: imgDataStore.extraInfoObj[viewId]['window_width'],
      windowCenter: imgDataStore.extraInfoObj[viewId]['window_center']
    }
  }else {
    return null
  }
})

const limit = computed(() => {
  if (!windowInfo.value){
    return {
      upper: 0,
      lower: 0,
    }
  }else {
    const {
      windowWidth,
      windowCenter
    } =  windowInfo.value

    return  {
      upper: Math.round((windowCenter + windowWidth / 2)),
      lower: Math.round((windowCenter - windowWidth / 2))
    }
  }
})

</script>

<template>
  <div class="w-full h-full flex flex-column">
    <span class="text-gray-300">
        {{limit.upper}}
    </span>
    <div class="flex-1 bg-gradient-to-b from-white to-dark">

    </div>
    <span class="text-gray-300">
        {{limit.lower}}
    </span>
  </div>
</template>

<style scoped>

</style>
